<template>
  <div>
		<BreadCrumb />
		<StudentForm :formVal="wyform" :rules="rules" @save="save" />
  </div>
</template>

<script setup>
import BreadCrumb from '@@/menu/breadcrumb'
import StudentForm from '@@/student/form'
import { reactive } from 'vue'
import { get, post } from '@/axios'
const wyform = reactive({
	name: '',
	phone: '',
	email: '',
	birthday: '',
	school: '',
	major: '',
	qualification: ''
})
function reset () {
	for (const key in wyform) {
		wyform[key] = ''
	}
}
function check (field, value, callback) {
	get('/umsStudent/check', { field, value }, content => {
		if (content) {
			callback()
		} else {
			callback(new Error())
		}
	})
}
const rules = {
	name: [
		{ required: true, message: '请输入学生姓名', trigger: 'blur' },
		{ max: 20, message: '学生姓名最多20个字符', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
		{ validator: (rule,value,callback) => { check('phone', value, callback) },message: '手机号已经被使用', trigger: 'blur' }
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的电子信箱', trigger: 'blur' },
		{ max: 64, message: '电子信箱最多64个字符', trigger: 'blur' },
		{ validator: (rule,value,callback) => { check('email', value, callback) },message: '电子信箱已经被使用', trigger: 'blur' }
	],
	birthday: [
		{ required: true, message: '请选择生日', trigger: 'blur' }
	],
	school: [
		{ required: true, message: '请输入学校', trigger: 'blur' },
		{ max: 20, message: '学校最多20个字符', trigger: 'blur' },
	],
	major: [
		{ required: true, message: '请输入专业', trigger: 'blur' },
		{ max: 20, message: '专业最多20个字符', trigger: 'blur' },
	],
	qualification: [
		{ required: true, message: '请选择学历', trigger: 'blur' }
	]
}
const save = () => {
	post('/umsStudent/add', wyform, content => {
		reset()
	})
}
</script>

<style scoped lang="scss">
</style>